<template>
	<view class="container">
		<v-search-item :keyword="key" v-for="(item) in records" :dataItem="item"  :key="item.id"></v-search-item>
		<view class="empty" v-if="isEmpty">
			<image class="empty-img" src="/static/search/empty.png"></image>
			<view class="empty-txt">没有搜索到相关的内容</view>
		</view>
	</view>

</template>

<script>
	import vSearchItem from './fragments/vsearchitem'
	import SearchService from '@/services/search/index'
	import {authCheck} from '@/utils/page'
	const searchService = new SearchService()
	export default {
		data() {
			return {
				key:'',
				records: [],
				pageNum:1,
				pageSize:8,
				hasNextPage:true
			}
		},
		computed:{
			isEmpty(){
				if(this.records==undefined||this.records.length==0){
					return true;
				}else{
					return false;
				}
			}
		},
		components: {
			vSearchItem
		},
		onPullDownRefresh() {
			this.hasNextPage = true;
			this.search({key:this.key,pageNum:1,callback:()=>uni.stopPullDownRefresh()})
		},
		//滑动到底部加载更多
		onReachBottom() {
			if(!this.hasNextPage){
				uni.showToast({
					title: '已经是最后一页了',
					icon:'none',
					duration: 2000
				});
				return;
			}
			const {key,pageNum} = this;
			this.search({key,pageNum:pageNum + 1,})
		},
		//取消
		onNavigationBarButtonTap(e) {
			uni.navigateBack({
				delta: 1
			})
		},
		onNavigationBarSearchInputChanged(e) {
			console.log(e)
		},
		//点击软键盘上的搜索触发
		onNavigationBarSearchInputConfirmed(e) {
			console.log(e.text)
			let key = e.text;
			if (key == undefined || key == "") {
				uni.showToast({
					title: "请输入关键词",
					duration: 2000
				})
				return
			}
			this.key = key;
			this.search({key,pageNum:1})
		},
		methods: {
			search(param_) {
				this.records = ''
				const {callback,...param} = param_;
				console.log('param:',param)
				searchService.search(param).then(response => {
					const {success,result } = response;
					if (success) {
						const {records,hasNextPage,pageNum} = result;
						console.log('records:',this.records)
						if(pageNum==1){
							this.records = records;
						}else{
							this.records = [...this.records,...records]
						}
						this.pageNum = pageNum;
						this.hasNextPage = hasNextPage;
						if(callback!=undefined && typeof callback == 'function'){
							callback();
						}
						uni.hideKeyboard();
					} 
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 20upx;
		background-color: #FFFFFF;
	}

	.empty {
		margin-top: 150upx;
		font-size: 28upx;
		color: #666666;
		text-align: center;
		&-img{
			width: 220upx;
			height: 180upx;
		}
		&-txt {
			margin-top: 60upx;
		}
	}
</style>
